<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<title>Line Style and Item Style - Apache ECharts Demo</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		#chart-container {
			position: relative;
			height: 100vh;
			overflow: hidden;
		}
	</style>
	<body>
		<div id="chart-container"></div>
		<script src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
	</body>
	<script type="text/javascript">
		var dom = document.getElementById('chart-container');
		var myChart = echarts.init(dom, null, {
			renderer: 'canvas',
			useDirtyRect: false
		});
		var app = {};
		var json = {
			chart0: {
				xcategory: [
					"0:00",
					"6:00",
					"8:00",
					"12:00",
					"16:00",
					"20:00",
					"24:00",
				],
				low: [222, 932, 66, 934, 111, 333, 0],
				lowLine: [],
			},
		};
		var zrUtil = echarts.util;
		zrUtil.each(json.chart0.xcategory, function(item, index) {
			json.chart0.lowLine.push([{
					coord: [index, json.chart0.low[index]],
				},
				{
					coord: [index + 1, json.chart0.low[index + 1]],
				},
			]);
		});

		var option;

		option = {
			color: ["#ec5d5f", "#f2cb58", "#64a0c8"],
			tooltip: {
				trigger: "axis",
				backgroundColor: "rgba(0,0,0,.5)",
				axisPointer: {
					type: "cross",
					label: {
						backgroundColor: "rgba(0,0,0,.5)",
					},
				},
				textStyle: {
					color: "#fff",
					fontSize: 14,
				},
			},

			grid: {
				left: 10,
				top: 40,
				bottom: 10,
				containLabel: true,
			},
			xAxis: [{
				nameGap: 3, //坐标轴名称与轴线之间的距离。
				nameTextStyle: {
					//坐标轴单位
					color: "rgba(255,255,255,.8)",
					fontSize: 12,
				},
				type: "category",
				data: [
					"0:00",
					"6:00",
					"8:00",
					"12:00",
					"16:00",
					"20:00",
					"24:00",
				],
				boundaryGap: false, //从0开始
				axisLine: {
					//坐标轴线颜色
					rotate: 30, //坐标轴内容过长旋转
					interval: 0,
					lineStyle: {
						color: "#636E7C",
					},
				},
				axisLabel: {
					// showMaxLabel: true,
					color: "rgba(255,255,255,.8)", //坐标的字体颜色
				},
				axisTick: {
					//坐标轴刻度颜色
					show: false,
				},
			}, ],
			yAxis: [{
				name: "人",
				type: "value",
				// hoverAnimation:true,
				min: 0,
				max: function(value) {
					return Math.ceil(value.max / 5) * 5;
				},
				splitNumber: 5,
				nameTextStyle: {
					//坐标轴单位
					color: "rgba(255,255,255,.89)",
					fontSize: 12,
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.25)",
						type: "dashed",
					},
					//网格线颜色
				},
				axisTick: {
					//坐标轴刻度颜色---不交叉
					show: false,
				},
				axisLine: {
					//坐标轴线颜色
					show: true,
					lineStyle: {
						color: "#636E7C",
					},
				},
				axisLabel: {
					color: "rgba(255,255,255,.8)", //坐标的字体颜色
				},
			}, ],
			series: [{
					name: "苏苏小苏苏",
					type: "line",
					smooth: this.smooth, //0.5,
					lineStyle: {
						// color: "#DC7828",
						width: 1.5,
						type: "solid",
						shadowOffsetX: 0, // 折线的X偏移
						shadowOffsetY: 3, // 折线的Y偏移
						shadowBlur: 4, // 折线模糊
						shadowColor: "rgba(220,120,40,0.95)", //折线颜色
					},
					showSymbol: false,
					itemStyle: {
						color: "#DC7828",
						// lineStyle: {
						//   color: "#1F824E", //改变折线颜色
						// },
					},
					areaStyle: {
						// // 颜色渐变函数 前四个参数分别表示四个位置依次为
						// 右下左上
						color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 1,
								color: "rgba(220,120,40,0.3)",
							},
							{
								offset: 0.74,
								color: "rgba(220,120,40,0.26)",
							},
							{
								offset: 0,
								color: "rgba(220,120,40,0)",
							},
						]),
					},
					emphasis: {
						focus: "series",
					},
					data: [222, 932, 66, 934, 111, 333, 0],
				},
				{
					showSymbol: false,
					name: "苏苏小苏苏",
					type: "lines",
					smooth: this.smooth, //0.5,
					coordinateSystem: "cartesian2d",
					// zlevel: 1,
					effect: {
						trailLength: 0.2,
						show: true,
						smooth: this.smooth,
						period: 1,
						symbolSize: 3,
						loop: true,
					},
					lineStyle: {
						normal: {
							color: "#fff",
							width: 0,
							opacity: 0,
							curveness: 0,
							type: "dashed",
						},
					},
					data: json.chart0.lowLine,
				},
			],
			// xAxis: {
			// 	type: 'category',
			// 	data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			// },
			// yAxis: {
			// 	type: 'value'
			// },
			// series: [{
			// 	data: [120, 200, 150, 80, 70, 110, 130],
			// 	type: 'line',
			// 	symbol: 'triangle',
			// 	symbolSize: 20,
			// 	lineStyle: {
			// 		color: '#5470C6',
			// 		width: 4,
			// 		type: 'dashed'
			// 	},
			// 	itemStyle: {
			// 		borderWidth: 3,
			// 		borderColor: '#EE6666',
			// 		color: 'yellow'
			// 	}
			// }]
		};

		if (option && typeof option === 'object') {
			myChart.setOption(option);
		}
		

		window.addEventListener('resize', myChart.resize);
	</script>
</html>
